<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
   <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap/owl.carousel.css" rel="stylesheet">
   <link href="css/bootstrap/owl.theme.css" rel="stylesheet">
   <link href="css/bootstrap/owl.transitions.css" rel="stylesheet">
   <link href="css/bootstrap/style.css" rel="stylesheet">
   <link href="css/bootstrap/config.css" rel="stylesheet">
   <script src="js/bootstrap/dist/js/sweetalert.min.js"></script>
   <script src="lib/bootstrap/jquery-3.2.1.js"></script>
<jsp:include page="/WEB-INF/jsp/public/meta.jsp"></jsp:include>
<jsp:include page="/WEB-INF/jsp/public/taglib.jsp"></jsp:include>
</head>
<body>

	<jsp:include page="/WEB-INF/jsp/front/header.jsp"/>

	<!-- ========== CONTENT START ========== -->

	<input type="hidden" id="gid" value="${goods.gid }">
	<input type="hidden" id="uid" value="${qtUser.uid }">
	<input type="hidden" id="price" value="${goods.price }">
	<input type="hidden" id="discount" value="${goods.discount }">
	<input type="hidden" id="gname" value="${goods.gname }">
	<input type="hidden" id="gpicpath" value="${goods.gpicpath }">
<section id="content">
  <div class="container">

    <ol class="breadcrumb">
      <li><a href="#">家庭</a></li>
      <li><a href="#">女装</a></li>
      <li>详情--></li>
    </ol>

    <div class="row">
      <div class="col-sm-5">

        <div id="product-large" class="owl-carousel">
          <c:forEach items="${gpictures }" var="gpicture">
          		<div class="item"><img src="/zzbinGood/g${goods.gid}/${gpicture.gpric}" style="width: 458px;height: 480px;"></div>
          </c:forEach>
        </div>
        <div id="product-thumb" class="owl-carousel">
          <c:forEach items="${gpictures }" var="gpicture">
          		<div class="item"><img src="/zzbinGood/g${goods.gid}/${gpicture.gpric}" style="width: 78px;height: 78px;"></div>
          </c:forEach>
        </div>

      </div>
      <div class="col-sm-7 summary entry-summary">
        
        <h1 class="product_title">${goods.gname }</h1>

        <p class="price" style="font-size: 20px;color: red;">
          <sup>原价：￥</sup><span class="amount" style="color: blue">${goods.price }0</span>
          <sup style="margin-left: 50px;">折扣：</sup><span class="amount">${goods.discount }</span><sup>折</sup>
        </p>
        <br/>
        <p class="price" style="font-size: 20px;color: red;">
          <sup>优惠价：￥</sup><span class="amount" id="newGoodPrice"></span>
        </p>
        <h3>商品简介</h3>

        <p>${goods.gdesc }</p>

        <hr>
        <h3>选择颜色和尺寸</h3>
		
        <div class="variations">
          <div class="row">
            <div class="col-sm-6">
              <select class="form-control col-sm-6" name="color" id="color">
              		<option value="0">Color</option>
              	<c:forEach items="${goodcolors}" var="goodcolor">
	                <option value="${goodcolor.gcid},${goodcolor.gcname}">${goodcolor.gcname}</option>
                </c:forEach>
              </select>
            </div>
            <div class="col-sm-6">
              <select class="form-control col-sm-6" name="size" id="size">
              		<option value="0">Size</option>
              	<c:forEach items="${goodsizes}" var="goodsize">
	                <option value="${goodsize.gsid},${goodsize.gsname}">${goodsize.gsname}</option>
                </c:forEach>
              </select>
            </div>
          </div>
        </div>

        <div class="quantity buttons_added">
          <button class="minus"><i class="fa fa-minus"></i></button>
          <input type="text" size="24" class="qty text form-control" id="numsInp" title="Qty" value="1" name="qty" step="1" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
          <button class="plus"><i class="fa fa-plus"></i></button>
          &nbsp; &nbsp; &nbsp; &nbsp;<span>库存<span id="goodNums" style="color: red;">0</span>件</span>
        </div>
		<br><br>
        <input type="button" class="btn btn-primary btn-lg" id="add-to-cart" value="加入购物车">
        <span style="font-size: 25px;margin-left: 250px;margin-top: 20px;">总价：</span>$ <span style="color: red;font-size: 30px;" id="carPrice"></span>
      </div>
    </div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs product-tabs">
      <li class="active"><a href="#description" data-toggle="tab">商品简介</a></li>
      <li><a href="#reviews" data-toggle="tab">详情评论</a></li>
      <li><a href="#Detailp" data-toggle="tab">详情图片</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="description">
        <p>清新有致的浅灰色短裤与T恤，简洁舒适的中性装扮，让整体显得格外时髦,金属项链与之相融和，看上去青春而富有朝气。</p>

        <p>深色的五分仔裤搭配镂空的针织衫，分外迷人；出位的配饰，可以为这样简单的装扮增添时尚风味。</p>
      
      	<p></p>
      	
      	<p></p>
      	
      	<p></p>
      </div>
      <div class="tab-pane" id="reviews">

        <div id="reviews">
          <ol class="commentlist">

			<!-- 评论内容--流容器 -->
			<div id="flowDiv">
				<div class="related" style="margin-top: -0.2%;" id="goodEvaluateDiv">
					<div class="layui-collapse" lay-filter="test"></div>
				</div>
			</div>
            
          </ol>
        </div>

      </div>
      
      <div class="tab-pane" id="Detailp">
      	<ul class="site-doc-icon site-doc-anim">
      		<!-- 评论内容--流容器 -->
			<div id="flowGcollocationDiv">
				<div class="related" style="margin-top: -0.2%;" id="gcollocationDiv">
					<div id="gcollocation" lay-filter="test"></div>
				</div>
			</div>
      	</ul>
      </div>
      
    </div>

    <div class="related">
      <h2 style="color: #FD638F;">你还可能喜欢</h2>
      <ul class="products row">
      	<c:forEach items="${Discounts }" var="Discount">
	        <li class="col-sm-3">
	          <div class="product">
	            <div class="thumbnail">
	              <a href="good/goodDetails?gid=${Discount.gid}"><img src="/zzbinGood/${Discount.gpicpath}" style="width: 263px;height: 333px;" alt=""></a>
	                <span class="fa-stack fa-2x">
	                  <i class="fa fa-circle fa-stack-2x"></i>
	                  <i class="fa fa-shopping-cart  fa-stack-1x fa-inverse"></i>
	                </span>
	              </a>
	            </div>
	            <hr>
	            <div class="title">
	              <h3 style="font-size: 10px;"><a href="#">${Discount.goodType.tdesc}</a></h3>
	              <p>折扣-<span style="color:red;">${Discount.discount}</span>-&amp; 好评</p>
	            </div>
	            <span class="price">$${Discount.price}</span>
	          </div>
	        </li>
        </c:forEach>
      </ul>
    </div>

  </div>
</section>

<!-- ========== CONTENT END ========== -->

<jsp:include page="/WEB-INF/jsp/front/leftCar.jsp"/>

<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/bootstrap/owl.carousel.min.js"></script>
<script src="lib/bootstrap/jquery.jpanelmenu.min.js"></script>
<script src="lib/bootstrap/main.js"></script>
<script src="js/front/goodDetails.js"></script>

</body>
</html>